iT邦幫忙

2024 iThome 鐵人賽

DAY 12
0
Modern Web

蓋一個自己的 Nuxt 3 UI Module系列 第 12

元件製作 layout -part.2

  • 分享至 

  • xImage
  •  

昨天完成了 layout 後看起來方便很多了呢~

今天來做一點小小的改動,將原本寫在 layout 頁面的 sidebar 清單移出來方便未來資料管理,將 layout 單純作為模板(這樣就不用每次新增刪除元件都要改動 layout 這個檔案啦!)

  • 新增 server/api/sidebar-item.ts

    把剛剛放在 demo-layout.vue 的選項清單移過來
    (這邊模擬清單內容可能是從 api 獲取的情境)

    //  server/api/sidebar-item.ts
    
    export const sidebarItem = [
      {
        title: '表單類',
        enable: true,
        isOpen: true,
        items: [
          { title: 'Button 按鈕', enable: true, url: '/Demo/button', icon: 'arcticons:accuweather' },
          { title: 'Input 輸入框', enable: true, url: '/Demo/input', icon: 'carbon:activity' },
          { title: 'Select 選擇框', enable: true, url: '/Demo/select', icon: 'arcticons:stack-exchange' },
          { title: 'Checkbox 複選', enable: true, url: '/Demo/checkbox', icon: 'carbon:3rd-party-connected' },
          { title: 'Radio 單選', enable: true, url: '/Demo/radio', icon: 'carbon:activity' },
          { title: 'Switch 開關', enable: true, url: '/Demo/switch', icon: 'carbon:aperture' },
        ]
      },
      {
        title: '小工具類',
        enable: true,
        items: [
          { title: 'Tabs 標籤', enable: true, url: '/Demo/tab', icon: 'arcticons:stack-exchange' },
          { title: 'Tooltip 提示', enable: true, url: '/Demo/tooltip', icon: 'carbon:activity' },
    
        ]
      }
    ]
    
    export default defineEventHandler((event) => {
      return sidebarItem
    })
    
  • 在 layouts/demo-layout.vue 中改用 useFetch 來獲取清單內容

    const sidebarGroup: Ref<SidebarGroup[]> = ref([])
    
    await useFetch<SidebarGroup[]>('/api/sidebar-item').then((_sidebarItem) => {
      sidebarGroup.value = _sidebarItem.data.value ?? []  
    })
    
  • 最後在 demo-layout 補一個圖片 logo

              <div class="flex items-center">
                <a class="navigation-logo" href="/">
    	              <div class="w-10 mr-2">
    	               <!-- 新增 logo -->
                      <img src="@/assets/images/seal.png" alt="logo">
                    </div>
                    我的 UI 元件庫
                </a>
                <div
                  class="navigation-menu flex items-center pr-5 duration-150 ease-in hover:scale-125"
                  @click="isSidebarFold = !isSidebarFold"
                >
                  <Icon
                    name="mdi:arrow-collapse-right"
                    :class="{'rotate-180': isSidebarFold}"
                  />
                </div>
              </div>
            </div>
    

  • 這樣就完成嚕
    明天要開始整理元件準備 module !


上一篇
元件製作 layout
下一篇
元件整理
系列文
蓋一個自己的 Nuxt 3 UI Module30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言